import React, { Component } from 'react';
import { Modal, Toast, List } from 'antd-mobile';
import GenderDialog from '../components/GenderDialog';
import BrithdayPicker from '../components/BrithdayPicker';
import { updateDeviceInfo ,setDocumentTitle} from '../utils';

const prompt = Modal.prompt;
const Item = List.Item;

// 用户信息编辑
class UserInfoEdit extends Component {
    constructor(props, context) {
        super(props, context);
        this.options = [{index:0,name:"女"},{index:1,name:"男"}];
        const genderList = localStorage.getItem('gender_list');
        if (genderList) {
            try {
                this.options = JSON.parse(genderList);
            } catch (error) {
                console.log(error);
            }
        }
        const user = this.props.location.user;
        this.handleOnItemNickName = this.handleOnItemNickName.bind(this);
        this.handleOnItemBrithday = this.handleOnItemBrithday.bind(this);
        this.handleOnItemGender = this.handleOnItemGender.bind(this);
        this.avatar = localStorage.getItem('avatar') || '';
        if (user && user.avatar) {
            this.avatar = user.avatar;
        }
        this.state = {
            user: user,
            showGender: false,
            showBrithday: false,
        };
    }
    componentDidMount() {
        setDocumentTitle("编辑信息");
    }

    componentWillUnmount() {
        if (this.dialog) {
            this.dialog.close();
        }
        Toast.hide();
    }

    //==========性别选择
    handleOnItemGender() {
        this.setState({
            showGender: true,
        });
    }

    handleGenderSubmit = (obj) => {
        let user = this.state.user
        Object.assign(user, { gender: obj.value })
        updateDeviceInfo(user, (data) => {
            if (data.errcode === 0) {
                this.setState({ showGender: false, user: Object.assign({}, this.state.user, { gender: obj.value }) });
                Toast.success("修改成功", 1, false)
            } else {
                this.setState({ showGender: false });
                Toast.success("修改失败", 1, false)
            }
        })
    }
    handleGenderDismiss = () => {
        this.setState({ showGender: false });
    }

    //===========生日
    handleOnItemBrithday() {
        this.setState({ showBrithday: true });
    }
    handleBrithdaySubmit = (obj) => {
        let user = this.state.user
        Object.assign(user, { brithday: obj.value })
        updateDeviceInfo(user, (data) => {
            if (data.errcode === 0) {
                this.setState({
                    showBrithday: false,
                    user: Object.assign({}, this.state.user, { brithday: obj.value })
                });
                Toast.success("修改日期成功", 1)
            } else {
                this.setState({
                    showBrithday: false,
                });
                Toast.success("修改日期失败", 1)
            }
        })
    }
    handleBrithdayDismiss = () => {
        this.setState({ showBrithday: false });
    }

    // =========== 编辑名称
    handleOnItemNickName() {
        this.dialog = prompt('修改昵称', '', [
            { text: '取消' },
            {
                text: '确定',
                onPress: name => new Promise((resolve, reject) => {
                    if (name.length > 7) {
                        Toast.show('昵称长度不多于7位', 1)
                        return
                    }
                    let uPattern = /^[\da-zA-Z_\u4e00-\u9f5a]{1,8}$/
                    if (!uPattern.test(name)) {
                        Toast.show('昵称可以为中文,字母,数字以及下划线组合', 1)
                        return
                    }
                    let user = this.state.user
                    Object.assign(user, { nick_name: name })
                    updateDeviceInfo(user, (data) => {
                        if (data.errcode === 0) {
                            this.setState({ user: Object.assign({}, this.state.user, { nick_name: name }) });
                            Toast.success("修改成功", 1, false)
                            resolve();
                        } else {
                            Toast.success("修改失败", 1, false)
                            resolve();
                        }
                    })
                }),
            },
        ], 'default', this.state.user.nick_name)
    }


    backgroundLine(height) {
        return (<div style={{ height: height, background: '#eeeeee', width: '100%' }} />)
    }

    render() {
        return (
            <div>
                {this.backgroundLine(16)}
                <Item
                    arrow="horizontal"
                    extra={
                        <img
                            src={this.avatar}
                            alt=''
                            style={styles.header} />}
                    onClick={() => console.log('')}>
                    <div style={styles.div_item}>
                        头像
                    </div>
                </Item>
                {this.backgroundLine(1)}

                <Item
                    arrow="horizontal"
                    extra={<p style={styles.text}>{this.state.user.nick_name||''}</p>}
                    onClick={this.handleOnItemNickName}>
                    <div style={styles.div_item}>
                        昵称
                    </div>
                </Item>
                {this.backgroundLine(1)}
                <Item
                    arrow="horizontal"
                    extra={<p style={styles.text}>{this.state.user.brithday || ""}</p>}
                    onClick={this.handleOnItemBrithday}>
                    <div style={styles.div_item}>
                        生日
                    </div>
                </Item>
                {this.backgroundLine(1)}

                <Item
                    arrow="horizontal"
                    extra={<p style={styles.text}>{this.options[this.state.user.gender || 0].name}</p>}
                    onClick={this.handleOnItemGender}>
                    <div style={styles.div_item}>
                        性别
                    </div>
                </Item>
                {this.backgroundLine(1)}

                {
                    this.state.showBrithday && <BrithdayPicker
                        isOpen={this.state.showBrithday}
                        date={this.state.user.brithday}
                        dismiss={this.handleBrithdayDismiss}
                        submit={this.handleBrithdaySubmit} />
                }

                {
                    this.state.showGender && <GenderDialog
                        open={this.state.showGender}
                        submit={this.handleGenderSubmit}
                        dismiss={this.handleGenderDismiss}
                        gender={this.state.user.gender === null ? -1 : this.state.user.gender}
                    />
                }
            </div>
        );
    }
}


export default UserInfoEdit


const styles = {
    header: { width: '46px', height: '46px', borderRadius: '3px' },
    div_item: {
        width: '100%', height: '36px', color: '#424242', fontSize: '15px', marginTop: 16
    },
    text: { fontSize: '12px' }
}